<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<table border="1">
				<tr>
					<td>商品编号</td>
					<td>商品名称</td>
					<td>商品价格</td>
					<td>商品库存</td>
					<td>商品总价</td>
				</tr>
				<tr v-for="item in cartItems">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.price}}</td>
					<td>{{item.count}}</td>
					<td>{{item.count * item.price}}</td>
				</tr>
			</table>
			<p>总价：{{total}}</p>
		</div>
		
		<script>			
			var app = Vue.createApp({
				data(){
					return {
						cartItems:[
							{id:1001, name: '足球', price: 45, count: 12},
							{id:1002, name: '篮球', price: 35, count: 8},
							{id:1003, name: '羽毛球', price: 6, count: 116},
							{id:1004, name: '乒乓球', price: 5, count: 73},
							{id:1005, name: '排球', price: 33, count: 7}
						]
					}
				},
				computed:{
					total(){
						var all = 0
						for(i in this.cartItems){
							all += this.cartItems[i].price * this.cartItems[i].count;
						}
						return all
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>
